<template>
  <a-layout-sider breakpoint="lg" v-model="collapsed">
    <div class="logo">
      <span> {{ collapsed ? "Blog" : "My Blog" }}</span>
    </div>
    <a-menu theme="dark" mode="inline" @click="gotoPage">
      <a-menu-item key="index"
        ><a-icon type="dashboard"></a-icon><span>仪表盘</span></a-menu-item
      >
      <a-sub-menu>
        <span slot="title"><a-icon type="mail" /><span>文章管理</span></span>
        <a-menu-item key="addArticle"
          ><a-icon type="edit"></a-icon><span>写文章</span></a-menu-item
        >
        <a-menu-item key="articleList"
          ><a-icon type="snippets"></a-icon><span>文章列表</span></a-menu-item
        >
      </a-sub-menu>
      <a-menu-item key="categoryList"
        ><a-icon type="book"></a-icon><span>分类列表</span></a-menu-item
      >

      <a-menu-item key="userList"
        ><a-icon type="user"></a-icon><span>用户列表</span></a-menu-item
      >
      <a-menu-item key="profile"
        ><a-icon type="setting"></a-icon><span>个人设置</span></a-menu-item
      >
    </a-menu>
  </a-layout-sider>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    gotoPage(item) {
      if (item.key == "addArticle") {
        return this.$router
          .push({ name: item.key, params: { id: 0 } })
          .catch((err) => err);
      }
      this.$router.push({ name: item.key }).catch((err) => err);
    },
  },
};
</script>

<style lang="scss" scoped>
.logo {
  height: 32px;
  margin: 16px;
  display: flex;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}
</style>